<template>
  <div class="tenant-wrapper" v-loading="loading">
    <div class="tenant-body">
      <section class="tenant-top">
        <div class='top_left'>
          <span class="left1">
            <search-input
              :defaultValue='inputValue'
              @change='handleNameSearch'
              maxWidth='200px'
              placeholder='请输入租户名称'
              class='search-input'>
            </search-input>
          </span>
        </div>
        <div class="right1"></div>
      </section>
      <div class="table-wrapper">
        <section>
          <el-table
            :data="tenantList"
            tooltip-effect='light'
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="tenantName"
                              min-width='160'
                              label="企业/团队">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="registerPhone"
                              min-width='140'
                              label="主账号">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="createTime"
                              min-width='140'
                              label="注册时间">
            </el-table-column>
            <el-table-column prop="isEnabled"
                              min-width='100'
                              label="状态">
              <template slot-scope="scope">
                {{!scope.row.isEnabled ? '禁用' : '启用'}}
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                              label="操作"
                              width='260px'>
              <template slot-scope="scope">
                <span class="caozuo" @click="handleEditLive(scope.row)">直播授权</span>
                <span class="caozuo" @click="handleEditMenu(scope.row)">设置菜单</span>
                <span class="caozuo"
                  @click="handleEditApp(scope.row)">设置应用</span>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <el-pagination
          style="width:100%;text-align:center;"
          background
          v-show='tenantList.length'
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="pageSizesG"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next">
        </el-pagination>
      </div>
    </div>
    <!-- 编辑租户菜单 -->
    <drawer
      :size="'620px'"
      :title="`设置租户（${currTenantName}）菜单`"
      class="tenant-menu-drawer"
      :visible="isShowTenantMenu"
      @beforeClose="beforeClose('isShowTenantMenu')"
      @closeDrawer="clearTenantMenuFields">
      <div
        v-if="isShowTenantMenu"
        slot="body"
        class="personal-wrapper">
        <!-- <div class="title">用于设置租户菜单的显示范围，选中的菜单才会在租户中显示，否则不显示。</div> -->
        <div class="tip">
          <span class="sign"></span>
          <span class="text">用于设置租户菜单的显示范围，选中的菜单才会在租户中显示，否则不显示。</span>
        </div>
        <el-form
          :model="tenantMenuInfo"
          ref="tenantMenuInfo"
          label-width="114px"
          class="demo-ruleForm">
          <el-form-item label="菜单分配" prop="menuList">
            <div class="menu-wrapper">
              <el-radio-group v-model="menuType" size="small">
                <el-radio-button label="wechat">营销平台</el-radio-button>
                <el-radio-button label="enterprise">企微平台</el-radio-button>
                <el-radio-button label="system">运维平台</el-radio-button>
              </el-radio-group>
              <ul class="tree-list">
                <li class="tree-item"
                  v-show="menuType === 'wechat'">
                  <el-tree
                    ref="wechattreeRef"
                    node-key="menuId"
                    show-checkbox
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    :data="wechatMenuList"
                    @check="checkWechatMenuList">
                  </el-tree>
                </li>
                <li class="tree-item"
                  v-show="menuType === 'enterprise'">
                  <el-tree
                    ref="corptreeRef"
                    node-key="menuId"
                    show-checkbox
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    :data="corpMenuList"
                    @check="checkCorpMenuList">
                  </el-tree>
                </li>
                <li class="tree-item"
                  v-show="menuType === 'system'">
                  <el-tree
                    ref="systemtreeRef"
                    node-key="menuId"
                    show-checkbox
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    :data="systemMenuList"
                    @check="checkSystemMenuList">
                  </el-tree>
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template slot="footer">
        <el-button
          size="small"
          type="primary"
          @click="handleSaveMenu()">保 存</el-button>
        <el-button
          size="small"
          @click="isShowTenantMenu = false">取 消</el-button>
      </template>
    </drawer>
    <!-- 设置应用 -->
    <el-dialog
      append-to-body
      width="1000px"
      title="设置应用"
      :visible.sync="isShowTenantApp">
      <el-table
        :data="appList"
        tooltip-effect='light'
        height='50vh'
        style="width: 100%"
        v-loading='isChangingEnable'>
        <el-table-column type="index"
                         label="序号"
                         width="80">
        </el-table-column>
        <el-table-column show-overflow-tooltip
                          prop="appName"
                          min-width='60'
                          label="应用名称">
        </el-table-column>
        <el-table-column show-overflow-tooltip
                          prop="appDesc"
                          min-width='140'
                          label="应用描述">
        </el-table-column>
        <el-table-column fixed="right"
                          label="操作"
                          width='80px'>
          <template slot-scope="scope">
            <span class="caozuo"
              v-show='!scope.row.hasAuth'
              @click='startEnable(scope.row)'>启用</span>
            <span class="caozuo"
              v-show='scope.row.hasAuth'
              @click='startDisable(scope.row)'>禁用</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 设置直播授权 -->
    <drawer size='700px'
            title='直播授权'
            :visible="isShowLiveAuth"
            @beforeClose="beforeClose('isShowLiveAuth')"
            @closeDrawer="clearLiveAuthFields">
      <div slot="body">
        <el-form :model="liveAuthInfo"
                  :rules="liveAuthRules"
                  ref="liveAuthRef"
                  label-width="104px"
                  class="demo-ruleForm">
          <el-form-item label="供应商名称" prop="provideName">
            <el-input
              placeholder="请输入供应商名称"
              v-model.trim="liveAuthInfo.provideName">
            </el-input>
          </el-form-item>
          <el-form-item label="平台域名地址" prop="domain">
            <el-input
              placeholder="请输入平台域名地址"
              v-model.trim="liveAuthInfo.domain">
            </el-input>
          </el-form-item>
          <el-form-item label="header数据" prop="headers">
            <el-input
              placeholder="请输入header数据"
              v-model.trim="liveAuthInfo.headers">
            </el-input>
          </el-form-item>
          <el-form-item label="token" prop="token">
            <el-input
              placeholder="请输入token"
              v-model.trim="liveAuthInfo.token">
            </el-input>
          </el-form-item>
          <el-form-item label="对接其他信息" prop="param">
            <el-input
              placeholder="请输入对接其他信息"
              v-model.trim="liveAuthInfo.param">
            </el-input>
          </el-form-item>
          <el-form-item label="描述" prop="describe">
            <el-input
              placeholder="请输入描述"
              v-model.trim="liveAuthInfo.describe">
            </el-input>
          </el-form-item>
          <el-form-item label="appid" prop="appid">
            <el-input
              placeholder="请输入appid"
              v-model.trim="liveAuthInfo.appid">
            </el-input>
          </el-form-item>
          <el-form-item label="secret" prop="secret">
            <el-input
              placeholder="请输入secret"
              v-model.trim="liveAuthInfo.secret">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template slot="footer">
        <el-button size="small" type="primary" @click="saveLiveAuth">确 定</el-button>
        <el-button size="small" @click="isShowLiveAuth = false">取 消</el-button>
        <el-button size="small" type="danger" v-if="liveAuthInfo && liveAuthInfo.provideId"
          @click="delLiveAuth">删 除</el-button>
      </template>
    </drawer>
  </div>
</template>
<script>
import searchInput from 'public/search-input'
import TypeButton from '@/public/typeButton'
import Drawer from '@/public/Drawer'
export default {
  components: {
    searchInput,
    TypeButton,
    Drawer
  },
  data () {
    return {
      loading: false,
      isLoading: false,
      inputValue: '',
      page: 1,
      pageSize: 10,
      total: 0,
      tenantList: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      defaultProps2: {
        children: 'children',
        label: 'appName'
      },
      menuType: 'wechat',
      wechatMenuList: [], // 营销平台菜单
      corpMenuList: [], // 企微平台菜单
      systemMenuList: [], // 运维平台菜单
      appList: [], // 当前租户申请过的应用列表
      // 设置租户直播授权相关
      isShowLiveAuth: false,
      liveAuthInfo: {
        tenantId: '',
        provideId: '',
        provideName: '',
        domain: '',
        headers: '',
        token: '',
        param: '',
        describe: '',
        appid: '',
        secret: ''
      },
      liveAuthRules: {
        provideName: [{ required: true, message: '必填', trigger: 'blur' }],
        domain: [{ required: true, message: '必填', trigger: 'blur' }]
        // param: [{ required: true, message: '必填', trigger: 'blur' }],
        // appid: [{ required: true, message: '必填', trigger: 'blur' }],
        // secret: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      // 编辑租户菜单
      isShowTenantMenu: false,
      currTenantId: '',
      currTenantName: '',
      tenantMenuInfo: {
        chooseWechatMenuList: [],
        chooseCorpMenuList: [],
        chooseSystemMenuList: []
      },
      // 编辑租户应用
      isShowTenantApp: false,
      tenantAppInfo: {
        chooseAppList: []
      },
      isChangingEnable: false
    }
  },
  methods: {
    // --------- 修改应用相关 ----------
    startEnable (app) {
      this.$confirm('确定启用当前应用吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isChangingEnable = true
        let url = `${this.SERVICE_SYS}/app/${this.currTenantId}/enable/${app.appId}/true`
        this.get(url).then(res => {
          if (res.data.code === 200) {
            this.showSucc('启用成功')
            setTimeout(() => {
              this.isChangingEnable = false
              this.fetchTenantApp()
            }, 500)
          } else {
            this.isChangingEnable = false
          }
        })
      }).catch(() => {
      })
    },
    startDisable (app) {
      this.$confirm('确定禁用当前应用吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isChangingEnable = true
        let url = `${this.SERVICE_SYS}/app/${this.currTenantId}/enable/${app.appId}/false`
        this.get(url).then(res => {
          if (res.data.code === 200) {
            this.showSucc('禁用成功')
            setTimeout(() => {
              this.isChangingEnable = false
              this.fetchTenantApp()
            }, 500)
          } else {
            this.isChangingEnable = false
          }
        })
      }).catch(() => {
      })
    },
    // 修改租户应用
    handleEditApp (info) {
      this.currTenantId = info.tenantId
      this.currTenantName = info.tenantName
      this.isShowTenantApp = true
      this.appList = []
      this.fetchTenantApp()
    },
    // 获取当前租户申请过的应用
    fetchTenantApp () {
      let url = `${this.SERVICE_SYS}/app/${this.currTenantId}/relation/v2`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          this.appList = res.data.data || []
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 点击保存
    handleSaveApp () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let appIds = this.tenantAppInfo.chooseAppList
      let url = `${this.SERVICE_SYS}/app/${this.currTenantId}/relation`
      this.posts(url, appIds).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc(res.data.message)
          this.isShowTenantApp = false
        }
      }).catch(err => {
        this.isLoading = false
        this.handleError(err)
      })
    },
    clearTenantAppFields () {
      this.tenantAppInfo = {
        chooseAppList: []
      }
      this.currTenantId = ''
      this.currTenantName = ''
    },
    // --------- 直播授权相关 ----------
    delLiveAuth () {
      this.$confirm('确定删除该租户的直播授权吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = `${this.SERVICE_TENANT}/live/${this.liveAuthInfo.tenantId}/del`
        let config = {
          params: {
            provideId: this.liveAuthInfo.provideId
          }
        }
        this.posts(url, {}, config).then(res => {
          if (res.data.code === 200) {
            this.showSucc('删除成功')
            this.isShowLiveAuth = false
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    saveLiveAuth () {
      this.$refs.liveAuthRef.validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.isLoading) {
          return false
        }
        this.isLoading = true
        console.log('== liveAuthInfo ==: ', this.liveAuthInfo)
        let url = `${this.SERVICE_TENANT}/live/${this.liveAuthInfo.tenantId}/auth`
        this.posts(url, this.liveAuthInfo).then(res => {
          if (res.data.code === 200) {
            this.showSucc('设置成功')
            this.isShowLiveAuth = false
          }
          this.isLoading = false
        })
      })
    },
    handleEditLive (info) {
      this.liveAuthInfo.tenantId = info.tenantId
      // 获取当前租户的直播授权信息
      let url = `${this.SERVICE_TENANT}/live/${info.tenantId}/auth`
      this.isShowLiveAuth = true
      this.get(url).then(res => {
        if (res.data.code === 200 && res.data.data) {
          this.assignKey(this.liveAuthInfo, res.data.data)
        }
      })
    },
    clearLiveAuthFields () {
      this.$refs.liveAuthRef && this.$refs.liveAuthRef.resetFields()
      this.liveAuthInfo = {
        tenantId: '',
        provideId: '',
        provideName: '',
        domain: '',
        headers: '',
        token: '',
        param: '',
        describe: '',
        appid: '',
        secret: ''
      }
    },
    // --------- 修改菜单相关 ----------
    // 修改租户菜单
    handleEditMenu (info) {
      this.currTenantId = info.tenantId
      this.currTenantName = info.tenantName
      this.isShowTenantMenu = true
      this.fetchTenantMenu()
    },
    // 获取当前租户的菜单
    fetchTenantMenu () {
      let url = `${this.SERVICE_ORG}/menu/${this.currTenantId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            // 对菜单进行分组：营销平台、企微平台、运维平台
            let chooseWechatMenuList = []
            let chooseCorpMenuList = []
            let chooseSystemMenuList = []
            data.forEach(menuInfo => {
              // 营销平台
              if (menuInfo.platform === 'customer_console') {
                chooseWechatMenuList = chooseWechatMenuList.concat(this.getSelectedListFromTree(menuInfo))
              // 企微平台
              } else if (menuInfo.platform === 'wecom_console') {
                chooseCorpMenuList = chooseCorpMenuList.concat(this.getSelectedListFromTree(menuInfo))
              // 运维平台
              } else if (menuInfo.platform === 'admin_console') {
                chooseSystemMenuList = chooseSystemMenuList.concat(this.getSelectedListFromTree(menuInfo))
              }
            })
            this.tenantMenuInfo.chooseWechatMenuList = chooseWechatMenuList
            this.tenantMenuInfo.chooseCorpMenuList = chooseCorpMenuList
            this.tenantMenuInfo.chooseSystemMenuList = chooseSystemMenuList
          } else {
            this.tenantMenuInfo = {
              chooseWechatMenuList: [],
              chooseCorpMenuList: [],
              chooseSystemMenuList: []
            }
          }
          // 回显菜单
          this.$nextTick(() => {
            this.handleMenuCheck(this.tenantMenuInfo.chooseWechatMenuList, 'wechattreeRef')
            this.handleMenuCheck(this.tenantMenuInfo.chooseCorpMenuList, 'corptreeRef')
            this.handleMenuCheck(this.tenantMenuInfo.chooseSystemMenuList, 'systemtreeRef')
          })
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 将树状结构的数据全部展开成一级数组结构, 并返回被选中的数据
    getSelectedListFromTree (tree) {
      // console.log('=== getSelectedListFromTree tree ===: ')
      let arr = []
      if (tree.isSelected) {
        arr.push(tree)
        if (tree.children && tree.children[0]) {
          tree.children.forEach(item => {
            let stepArr = this.getSelectedListFromTree(item)
            arr = arr.concat(stepArr)
          })
        }
      }
      return arr
    },
    // 点击保存
    handleSaveMenu () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let menus = this.tenantMenuInfo.chooseWechatMenuList.concat(this.tenantMenuInfo.chooseCorpMenuList, this.tenantMenuInfo.chooseSystemMenuList)
      // 从中区分导航和菜单，并获取它们的menuId
      let navMenuIds = [] // 导航id
      let menuIds = [] // 菜单id
      menus.forEach(menu => {
        if (menu.isNav) {
          navMenuIds.push(menu.menuId)
        } else {
          menuIds.push(menu.menuId)
        }
      })
      console.log('handleSaveMenu navMenuIds: ', navMenuIds)
      console.log('handleSaveMenu menuIds: ', menuIds)

      let url = `${this.SERVICE_ORG}/menu/${this.currTenantId}`
      let params = {
        menuIds: menuIds,
        navMenuIds: navMenuIds
      }
      this.posts(url, params).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc(res.data.message)
          this.isShowTenantMenu = false
        }
      }).catch(err => {
        this.isLoading = false
        this.handleError(err)
      })
    },
    clearTenantMenuFields () {
      this.menuType = 'wechat'
      this.tenantMenuInfo = {
        chooseWechatMenuList: [],
        chooseCorpMenuList: [],
        chooseSystemMenuList: []
      }
      this.currTenantId = ''
      this.currTenantName = ''
    },
    // 关闭抽屉
    beforeClose (name) {
      this[name] = false
    },
    // 添加编辑角色(公众号菜单选择)
    checkWechatMenuList (data, selected) {
      this.handleMenuData(selected, this.tenantMenuInfo, 'chooseWechatMenuList')
    },
    // 添加编辑角色(企业号菜单选择)
    checkCorpMenuList (data, selected) {
      this.handleMenuData(selected, this.tenantMenuInfo, 'chooseCorpMenuList')
    },
    // 添加编辑角色(控制台菜单选择)
    checkSystemMenuList (data, selected) {
      this.handleMenuData(selected, this.tenantMenuInfo, 'chooseSystemMenuList')
    },
    fetchTenantList () {
      this.loading = true
      let param = {
        keyword: this.inputValue || null,
        currentPage: this.page,
        pageSize: this.pageSize
      }
      let url = `${this.SERVICE_TENANT}/list`
      this.get(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          if (data && data.list && data.list.length) {
            this.total = +data.total
            this.tenantList = data.list
          } else {
            this.tenantList = []
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    handleNameSearch (value) {
      this.inputValue = value
      this.page = 1
      this.fetchTenantList()
    },
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.fetchTenantList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.fetchTenantList()
    },
    // 获取所有菜单
    fetchAllMenuList () {
      let url = `${this.SERVICE_ROLE}/menu/v2`
      this.get(url).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let menuList = res.data.data
          if (menuList && menuList.length) {
            // 对菜单进行分组：营销平台、企微平台、运维平台
            let wechatMenuList = [] // 营销平台菜单
            let corpMenuList = [] // 企微平台菜单
            let systemMenuList = [] // 运维平台菜单
            menuList.forEach(menuInfo => {
              // 营销平台
              if (menuInfo.platform === 'customer_console') {
                wechatMenuList.push(menuInfo)
              // 企微平台
              } else if (menuInfo.platform === 'wecom_console') {
                corpMenuList.push(menuInfo)
              // 运维平台
              } else if (menuInfo.platform === 'admin_console') {
                systemMenuList.push(menuInfo)
              }
            })
            this.wechatMenuList = wechatMenuList
            this.corpMenuList = corpMenuList
            this.systemMenuList = systemMenuList
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    /**
     * 点击选中菜单，将menuId进行存储
     * @param {Object} selected 用于获取选中的node的key值和获取半选中的node的key值
     * @param {Object} obj 需要修改的目标
     * @param {String} chooseListName 目标中的key
     */
    handleMenuData (selected, obj, chooseListName) {
      // 获取选中的node (完全选中状态)
      let checkedNodes = selected.checkedNodes || []
      // console.log('=== checkedNodes ===: ', checkedNodes)
      // 获取半选中的node（半选中状态）
      let halfCheckedNodes = selected.halfCheckedNodes || []
      // console.log('=== halfCheckedNodes ===: ', halfCheckedNodes)
      let menuList = []
      if (checkedNodes && halfCheckedNodes.length) {
        menuList = checkedNodes.concat(halfCheckedNodes)
      } else {
        menuList = checkedNodes
      }
      obj[chooseListName] = menuList
      // console.log('==== obj ===: ', obj)
      this.$forceUpdate()
    },
    /**
     * 接口获取menuId数据，菜单tree回显
     * @param {Array} menuList 包含全选和半选的menu
     * @param {String} treeRefName 元素对应的ref名称
     */
    handleMenuCheck (menuList, treeRefName) {
      // 实际选中的菜单id
      let checkedKeys = []
      // menuList是设置选中的数据
      menuList.forEach(i => {
        let menuId = i.menuId
        // 根据id 拿到 Tree 组件中的node的所有信息
        let node = this.$refs[treeRefName].getNode(menuId)
        // node.isLeaf：判断当前节点是否为子节点
        if (node && node.isLeaf) {
          // 如果是子节点，就添加对应菜单id
          checkedKeys.push(menuId)
        }
      })
      // 设置选中
      this.$refs[treeRefName].setCheckedKeys(checkedKeys)
    }
  },
  created () {
    this.fetchTenantList()
    this.fetchAllMenuList()
  }
}
</script>
<style lang="stylus" scoped>
.caozuo
  display inline-block
  color #3496FF
  font-size 12px
  cursor pointer
  &.delete
    color #FA376C
  &.stop
    color #FF7E40
.caozuo
  margin-right 20px
  &:last-child
    margin-right 0
.tenant-wrapper
  width 100%
  height 100%
  .tenant-body
    width 100%
    min-height 100%
    font-size 12px
    overflow-y auto
    background #f2f2f6
    padded_box(border-box, 6px)
    border-radius 6px
    .tenant-top
      between()
      width 100%
      background #fff
      padded_box(border-box, 15px 20px)
      border-radius 6px
      margin-bottom 6px
      .top_left
        >>> .el-input
          width 132px
          height 30px
          line-height 30px
        >>> .el-input__inner
          width 100%
          height 100%
          line-height 30px
        >>> .el-date-editor
          height 30px
          width 200px
        >>> .el-select .el-input__icon
          line-height 30px
        .left-label
          font-size: 12px;
          color: #5E5E66;
          margin-right 16px
        .left1
          font-size 0
          .search-input
            width 100%
        .left2
          margin 0 6px
        .chaxun
          color #3496FF
          cursor pointer
          font-size 12px
        .reset
          color #22242F
          cursor pointer
          font-size 12px
          margin-left 13px
      .right1
        flex .5
        right1()
        font-size 0
        >>> .el-input
          width 281px
    .table-wrapper
      background: #fff;
      box-sizing: border-box;
      padded_box(border-box, 15px 20px);
      border-radius: 6px;
      .status-wrapper
        display flex
        align-items center
        .icon
          width 24px
          height 24px
          background-repeat no-repeat
          background-position center
          background-size 100%
          margin-right 6px
          &.draft
            background-image url('~assets/img/enterprise/ic_draft@2x.png')
          &.complete
            background-image url('~assets/img/enterprise/icon_complete@2x.png')
            background-size 18px
        .text
          font-size: 14px;
          color: #888B9C;
// 设置租户菜单
.tenant-menu-drawer
  // >>> .el-drawer__body
  //   .handle-body
  //     padded_box(border-box, 20px 15px !important)
  .personal-wrapper
    width 100%
    padded_box(border-box, 0 10px)
    position relative
    .title
      height 40px
      background rgb(236,239,244)
      line-height 30px
      font-size 14px
      padded_box(border-box,5px 10px)
      margin-bottom 20px
    .tip
      padded_box(border-box, 0 0 0 22px)
      position relative
      .sign
        width 14px
        height 14px
        background url('~assets/img/icon-tip@2x.png') no-repeat center/100%
        position absolute
        top 2px
        left 0
      .text
        font-size 12px
        color #5E5E66
        line-height:18px
    .demo-ruleForm
      margin-top 12px
      // 角色分配菜单
      .menu-wrapper
        border 1px solid #DCDFE6
        width 420px
        padded_box(border-box, 10px)
        .tree-list
          width 100%
          margin-top 8px
</style>
